<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>年：<input type="text" id="year"></p>
    <p>月：<input type="text" id="month"></p>
    <p>日：<input type="text" id="day"></p>
    <p><button id="btn">判断</button></p>
    <p><input type="text" id="result" disabled></p>
    <p><input type="text" id="result1" disabled></p>
</body>
<script>
    // 1.获取元素
    var yearInp = document.getElementById("year");
    var monthInp = document.getElementById("month");
    var dayInp = document.getElementById("day");
    var btn = document.getElementById("btn");
    var resultInp = document.getElementById("result");
    var result1Inp = document.getElementById("result1");
    // 打印一遍，看是否获取成功
    console.log(yearInp, month, day, btn, result, result1);

    // 2.绑定点击事件
    btn.onclick = function () {
        // 3.点击取值
        var year = Number(yearInp.value), //获取年份输入框的value值
            month = Number(monthInp.value),
            day = Number(dayInp.value);
        var x = pd(year, month, day);
        resultInp.value = x;
        var y = js(year, month, day);
        result1Inp.value = y;
    }

    function pd(year, month, day) {
        var maxDay;
        if (year < 1000 || year > 9999 || year % 1 != 0) {
            // alert("输入年份有误");
            return "输入年份有误";
            // resultInp.value = "";
        } else if (month >= 1 && month <= 12 && month % 1 == 0) { //4.判断月份 => 月份正确的情况下
            if (month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) { //5.大月31天
                maxDay = 31;
            } else if (month == 4 || month == 6 || month == 9 || month == 11) { //6.小月30天
                maxDay = 30;
            } else {
                if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { //7.闰年2月29天
                    maxDay = 29;
                } else { //8.平年2月28天
                    maxDay = 28;
                }
            }
            if (day >= 1 && day <= maxDay) { //9.判断日期是否有误
                // resultInp.value = year + "年" + month + "月" + day + "日";
                var x = year + "年" + month + "月" + day + "日";
                return x;
            } else {
                // alert("输入日期有误");
                return "输入日期有误";
                // resultInp.value = year + "年" + month + "月";
            }
        } else {
            // alert("输入月份有误");
            return "输入月份有误";
            // resultInp.value = year + "年";
        }
    }

    function js(year, month, day) {
        var sum = 0;
        if (resultInp.value == year + "年" + month + "月" + day + "日") { //如果获取到的年月日都正确再进行下一步
            var feDay = 28, add;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                feDay = 29;
            }
            add = feDay + day;
            switch (month) {
                case 1: sum = day; break;
                case 2: sum = 31 + day; break;
                case 3: sum = 31 + add; break;
                case 4: sum = 31 * 2 + add; break;
                case 5: sum = 31 * 2 + 30 + add; break;
                case 6: sum = 31 * 3 + 30 + add; break;
                case 7: sum = 31 * 3 + 30 * 2 + add; break;
                case 8: sum = 31 * 4 + 30 * 2 + add; break;
                case 9: sum = 31 * 5 + 30 * 2 + add; break;
                case 10: sum = 31 * 5 + 30 * 3 + add; break;
                case 11: sum = 31 * 6 + 30 * 3 + add; break;
                case 12: sum = 31 * 6 + 30 * 4 + add; break;
            }
            // result1Inp.value = "今天是本年第" + sum + "天"; //输出天数
            var y = "今天是本年第" + sum + "天";
            return y;
        } else {
            // result1Inp.value = ""; //如果日期获取不正确，则输出空
            return "";
        }
    }
</script>

</html>